<template>
	<view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
				<swiper-item v-for="(item,index) in blist.pics">
					<view class="swiper-item uni-bg-red">
						<image @click="funs(index)" class="imgs" :src="item.pics_big" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="goods-info-box">
			<!-- 商品价格 -->
			<view class="price">￥{{blist.goods_price}}</view>
			<!-- 信息主体区域 -->
			<view class="goods-info-body">
				<!-- 商品名称 -->
				<view class="goods-name">{{blist.goods_name}}</view>
				<!-- 收藏 -->
				<view class="favi">
					<uni-icons type="star" size="18" color="gray"></uni-icons>
					<text>收藏</text>
				</view>
			</view>
			<!-- 运费 -->
			<view class="yf">快递：免运费</view>
		</view>
		<view class="">
			<rich-text :nodes="blist.goods_introduce"></rich-text>
		</view>
		<view class="botm">
			<uni-goods-nav @buttonClick="buttonClick" @click="onClick" />
		</view>
	</view>
</template>

<script>
	// const cartstore = storeToref
	export default {
		data() {
			return {
				str: "",
				blist: []
			};
		},
		onLoad(options) {
			this.str = options.goods_id
			this.fun(options.goods_id)
		},
		methods: {
			fun(id) {
				uni.request({
					url: 'https://www.uinav.com/api/public/v1/goods/detail',
					data: {
						goods_id: id
					},
					success: (res) => {
						console.log(res.data.message)
						  res.data.message.goods_introduce = res.data.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ').replace(/webp/g, 'jpg')
						this.blist = res.data.message;
					}
				})
			},
			funs(i) {
				uni.previewImage({
					// 预览时，默认显示图片的索引
					current: i,
					// 所有图片 url 地址的数组
					urls: this.blist.pics.map(x => x.pics_big)
				})
			},
			onClick(){
				
			},
			buttonClick(e){
				console.log(e)
				if (e.index === 0) {
				    // 切换到购物车页面
				    uni.switchTab({
				      url: '/pages/cate/cate'
				    })
				  }
			}
		}
	}
</script>

<style lang="scss">
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.imgs {
		width: 100%;
		height: 100%;
	}

	.goods-info-box {
		padding: 10px;
		padding-right: 0;

		.price {
			color: #c00000;
			font-size: 18px;
			margin: 10px 0;
		}

		.goods-info-body {
			display: flex;
			justify-content: space-between;

			.goods-name {
				font-size: 13px;
				padding-right: 10px;
			}

			// 收藏区域
			.favi {
				width: 120px;
				font-size: 12px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-left: 1px solid #efefef;
				color: gray;
			}
		}

		// 运费
		.yf {
			margin: 10px 0;
			font-size: 12px;
			color: gray;
		}
	}
	.botm{
		position: fixed;
		bottom: 0;
		width: 100%;
	}
</style>
